<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="Josué Ramos" />
	<?php  echo css_asset('plot_layout_style.css','layout_plotter'); 
		   echo css_asset("jquery-ui-1.8.14.custom.css",'timepicker');
		   echo js_asset('jquery-1.6.1.min.js');
		   echo js_asset('scripts','datepicker');
		   echo js_asset('jquery-ui-1.8.14.custom.min.js','timepicker');
		   echo js_asset('jquery-ui-timepicker-addon.js','timepicker');
		   echo js_asset('EJSChart.js','emprise_jschart');
		   echo js_asset('EJSChart_SVGExport.js','emprise_jschart');
	?>
	<title><?php echo lang('title'); ?></title>
		<style>
		.XFont { font-style: bold; 
				 color: black;
				-webkit-transform: rotate(-90deg);
  				-moz-transform: rotate(-90deg);
  				filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  				 }
		.YFont {font-style: bold; font-size:small;}
		</style>
				
		<script type="text/javascript">

		$(document).ready(function(){
			
			$("#date").click(function(){
				viewcalendar();	
			});

			$('#time').timepicker({
				ampm: false,
				hourMin: 0,
				hourMax: 23
			});
			//lOGICA NECESARIA PARA EL LLENADO DE LA GRÁFICA
			var chart = new EJSC.Chart("myChart",
				{show_legend : true,
				 title : " ",
				 background : {
				 	color : "#AED",
				 	opacity : 1,
				 	includeTitle : true
				 },
				 axis_bottom: new EJSC.LinearAxis({
				 				crosshair : {show : false},
				 				caption_class: "XAxis",
				 			    size: 40
				 			}),
				 axis_left : new EJSC.LinearAxis({
				 				 crosshair : {show : false}

				 			})
				 
			 });

		  function doShowHint(point, series, chart, hint,
				    hover_select) {
				    var hint;  
				    if (hover_select == "hover") {
				      hint = 'Hovering over: [x],[y]';    
				    } else {
				      hint = '[series_title]<br />' +
				        'Selected Point: [x],[y]';    
				    }
				    
				    return hint;
		   }

			
			var url = $("#plotter_form").attr("action");

			$('select#tipo_reporte').change(function(){
				var str ="";
				$('select option:selected').each(function(){
					if( $(this).attr("value") == 1){
						//REPORTE POR INTERVALO DE TIEMPO
						$("#time").hide();
						$("label[for='time']").hide();
						$("#cuantosDias").show();
						$("label[for='cuantosDias']").show();
					}else if($(this).attr("value") == 2){
						//REPORTE POR DIA
						$("#time").hide();
						$("label[for='time']").hide();
						$("#cuantosDias").hide();
						$("label[for='cuantosDias']").hide();
					}else if($(this).attr("value") == 3){
						//REPORTE POR HORA
						$("#time").show();
						$("label[for='time']").show();
						$("#cuantosDias").hide();	
						$("label[for='cuantosDias']").hide();		
		
					}
				});
				$('#prueba').text(str);
				
			}).trigger('change');
			
						
			/*$("#export").click(function(){
				$.post("export/",
						{"svgCode" : chart.exportSVG({
		                       			includeHeader: true,
		                       			height: "50%",
		                       			width: "50%"
		               				 })
		                });
				
				});
	          */     
             /*  $("#export").click(function(){
   				
   						$("#svgCode").attr("value",chart.exportSVG({
   		                       			includeHeader: true,
   		                       			height: "50%",
   		                       			width: "50%"
   		               				 }) );
   		                
   			     });
	*/
					
		
			
			$('#plotter_form').submit(function(event){
				event.preventDefault();
			var str = $("#plotter_form").serialize();
			var url = $("#plotter_form").attr("action");
			// Haciendo petición POST ajax
			$.post( url, 
					  str , 
					function(data){
						var responseOBJ = eval("("+data+")");
						
						$("#error_messages").html("");
						if(responseOBJ.code == 1){
							chart.remove();
							
							chart = new EJSC.Chart("myChart",
									{show_legend : true,
									 title : "Chart de prueba TKme",
									 background : {
									 	color : "#AED",
								
									 	opacity : 1,
									 	includeTitle : true
									 },
									 axis_bottom: new EJSC.LinearAxis({
										 caption_class: "XAxis",
										 label_class: "XFont",
										 size: 40,
										 formatter: new EJSC.DateFormatter({
										        format_string: 'MMM-DD'
										      })
									 	
									 	
									 }),
									 axis_left : new EJSC.LinearAxis({
						 				 crosshair : {show : false},
						 				label_class: "YFont",
					 				 	 extremes_ticks : true,
					 				 	major_ticks : {

					 				 	       thickness: 1,

					 				 	       size: 4,

					 				 	       color: undefined,

					 				 	       opacity: 100,

					 				 	       show: true,

					 				 	       count: undefined,

					 				 	       offset: 0,

					 				 	       min_interval: undefined,

					 				 	       max_interval: undefined

					 				 	}
									 }),
									 
								 });
							//asignación del evento 
							chart.onAfterDraw = function(chart){

													$("#svgCode").attr("value",chart.exportSVG({
									          			includeHeader: true,
									          			height: "60%",
									          			width: "95%"
								  				 	}));
								  				 	
												};
							
							var length = responseOBJ.graphs.length;
								chart.axis_bottom.setCaption(responseOBJ.tiempo);
								chart.axis_left.setCaption(responseOBJ.unidad);
								chart.axis_left.setExtremes(parseFloat(responseOBJ.graphs[length-1].minimo)-5.0,
															parseFloat(responseOBJ.graphs[length-1].maximo)+5.0);
								
								$("#grafica_title").html(responseOBJ.reporte_title);	
								$("#reporte_title").attr("value",responseOBJ.reporte_title);			
							for(var idx = 0;idx < length-1;idx++){
								chart.addSeries(new EJSC.LineSeries(
										new EJSC.CSVStringDataHandler(getCSV_string(responseOBJ,idx) )
										, {
								      lineWidth: 2,
								      title: responseOBJ.graphs[idx].nombre,
								      x_axis_formatter: new EJSC.DateFormatter({
								          format_string: 'MMM DD @ HH:NN'
								        })
								    })
							    );
							}

														
						}else{
							//error result
							$("#error_messages").html(responseOBJ.date_error + " "+
													  responseOBJ.time_error + " "+
													  responseOBJ.cuantosDias_error);
						}
						//handler1.setXMLData( data );
						//chart.addSeries(handler1);						  																		
						
				}
			);// fin post
				

				 
			});

			function getCSV_string(responseOBJ,graph){
				var cvs = "";

				//alert(responseOBJ.tipo_reporte);			
				if(responseOBJ.tipo_reporte == 1){	// Reporte por intervalo 
					for(i = 0;i < responseOBJ.graphs[graph].xml.length;i++){
						var date = responseOBJ.graphs[graph].xml[i].x;
						splitedDate = date.split("-",3);
						x = Date.UTC(splitedDate[2],splitedDate[1]-1,splitedDate[0]);
						cvs += x + "|" + responseOBJ.graphs[graph].xml[i].y + ",";
					}
				}else{
					for(i = 0;i < responseOBJ.graphs[graph].xml.length;i++){
						
						cvs += responseOBJ.graphs[graph].xml[i].x + "|" + responseOBJ.graphs[graph].xml[i].y + ",";
					}
				}
				
				return cvs;
			}
			
		});	
	</script>
						
</head>

<body>
<p align="left">
	<a href="http://www.intensivstation.ch"><img src="http://intensivstation.ch/files/en_templates/css_logo.gif" alt="" width="414" height="56" border="0" /></a>
	<?php 
		
			echo anchor('/welcome/setLanguage/spanish',image_asset("mex_lang.png",'',array('alt'=>'Español')),'Español');
			echo anchor('/welcome/setLanguage/english',image_asset("eua_lang.png",'',array('alt'=>'Inglés')),'Inglés');
			echo anchor('/welcome/logout','Logout');
	?>
	
</p>
<h1 class="barSlogan"></h1>

	<div id="menu">
		<div class="panel" align="justify">
					<span class="orangetitle"><?php echo lang('form_title')?></span>
					<span class="bodytext"><br />
					<?php echo lang('form_description') ?>
					<?php echo br(3);?>
					<?php 
						echo validation_errors();
						echo form_open("/dispatcher/validateForm",array('class'=>'form','id'=>'plotter_form')); ?>
					<?php 
						
						$extra= 'id = "tipo_reporte"';
						$reportes = array(
										REPORTE_MULTIPLE => 'Reportes de 2 a 90 dias',
										REPORTE_POR_DIA => 'Reportes por dia',
										REPORTE_POR_HORA => 'Reportes por hora');
						echo form_label(lang('form_reports_label'),"tipo_reporte");
						echo br();
						echo form_dropdown('tipo_reporte',$reportes,REPORTE_MULTIPLE,$extra);
						echo br(2);
						
						$extra= 'id = "variable"';
						$variables = array(
										TEMPERATURA_1 => 'Temperatura 1',
										TEMPERATURA_2 => 'Temperatura 2',
										TEMPERATURA_3 => 'Temperatura 3',
										TEMPERATURA_4 => 'Temperatura 4',
										HUMEDAD_1 => 'Humedad 1',
										HUMEDAD_2 => 'Humedad 2',
										HUMEDAD_3 => 'Humedad 3',
										HUMEDAD_4 => 'Humedad 4',
										TEMP_PLANTA1 => 'Temperatura Planta 1',
										TEMP_PLANTA2 => 'Temperatura Planta 2',
										VOLTAJE_1 => 'Voltaje 1',
										CURRENT_1 => 'Corriente 1',
										VOLTAJE_2 => 'Voltaje 2',
										CURRENT_2 => 'Corriente 2',
										VOLTAJE_3 => 'Voltaje 3',
										CURRENT_3 => 'Corriente 3',
										VOLTAJE_4 => 'Voltaje 4',
										CURRENT_4 => 'Corriente 4',
										VOLTAJE_5 => 'Voltaje 5',
										CURRENT_5 => 'Corriente 5',
										VOLTAJE_6 => 'Voltaje 6',
										CURRENT_6 => 'Corriente 6',
										VOLTAJE_7 => 'Voltaje 7',
										VOLTAJE_8 => 'Voltaje 8',
										DIESEL_1 => 'Diesel 1',
										DIESEL_2 => 'Diesel 2',
										DIGITAL_INPUT_1 => 'Digital Input 1',
										DIGITAL_INPUT_2 => 'Digital Input 2',
										DIGITAL_INPUT_3 => 'Digital Input 3',
										DIGITAL_INPUT_4 => 'Digital Input 4',
										DIGITAL_INPUT_5 => 'Digital Input 5',
										DIGITAL_INPUT_6 => 'Digital Input 6',
										DIGITAL_INPUT_7 => 'Digital Input 7',
										DIGITAL_INPUT_8 => 'Digital Input 8',
										DIGITAL_INPUT_9 => 'Digital Input 9',
										DIGITAL_INPUT_10 => 'Digital Input 10',
										DIGITAL_INPUT_11 => 'Digital Input 11',
										DIGITAL_INPUT_12 => 'Digital Input 12',
										DIGITAL_INPUT_13 => 'Digital Input 13',
										DIGITAL_INPUT_14 => 'Digital Input 14',
										DIGITAL_INPUT_15 => 'Digital Input 15',
										DIGITAL_INPUT_16 => 'Digital Input 16',
										DIGITAL_INPUT_17 => 'Digital Input 17',
										DIGITAL_INPUT_18 => 'Digital Input 18',
										DIGITAL_INPUT_19 => 'Digital Input 19',
										DIGITAL_INPUT_20 => 'Digital Input 20',
										DIGITAL_INPUT_21 => 'Digital Input 21',
										DIGITAL_INPUT_22 => 'Digital Input 22',
										DIGITAL_INPUT_23 => 'Digital Input 23',
										DIGITAL_INPUT_24 => 'Digital Input 24',
										DIGITAL_OUTPUT_1 => 'Digital Output 1',
										DIGITAL_OUTPUT_2 => 'Digital Output 2',
										DIGITAL_OUTPUT_3 => 'Digital Output 3',
										DIGITAL_OUTPUT_4 => 'Digital Output 4',
										DIGITAL_OUTPUT_5 => 'Digital Output 5',
										DIGITAL_OUTPUT_6 => 'Digital Output 6',
										DIGITAL_OUTPUT_7 => 'Digital Output 7',
										DIGITAL_OUTPUT_8 => 'Digital Output 8',
										DIGITAL_OUTPUT_9 => 'Digital Output 9',
										DIGITAL_OUTPUT_10 => 'Digital Output 10',
										DIGITAL_OUTPUT_11 => 'Digital Output 11',
										DIGITAL_OUTPUT_12 => 'Digital Output 12',
										DIGITAL_OUTPUT_13 => 'Digital Output 13',
										DIGITAL_OUTPUT_14 => 'Digital Output 14',
										DIGITAL_OUTPUT_15 => 'Digital Output 15',
										DIGITAL_OUTPUT_16 => 'Digital Output 16',
										);
										
						echo form_label(lang('form_variable_label'),'variable'); 
						echo br();
						echo form_dropdown('variable',$variables,null,$extra);
						echo br(2); 
						
						echo form_label(lang("form_date_label"),'date');
						echo br();
						echo form_input(array(
											'name' => "date",
											'id' => "date",
											'readonly' => true,
											'size' => '12',
											'value' => date("d.m.Y")));
						echo br(2); 
						
						echo form_label(lang("form_time_label"),"time");
						echo br();
						echo form_input(array(
											'name' => 'time',
											'id' => 'time',
											'readonly' => true,
											'size' => '12',
											'value' => date("G:i")));
						echo br(2);

						echo form_label(lang('form_numDays_label'),"cuantosDias");
						echo br();

					   
						echo form_input(array(
											'name' => 'cuantosDias',
											'id' => 'cuantosDias',
											'size' => '6',
											'value' => '7'));
						echo br(2);
						
						echo form_submit(array(
											'name'=>'plotter_form_submit',
											'id' => 'plotter_form_submit',
											'value' => lang("form_submit_value") ));
						echo form_close();
						
					?>
					<br />
						<div id="error_messages" ></div>				
						
					</span><br />	
			
		</div>
	
	</div>

	<div id="content">
		<div class="panel" align="justify">
			<span class="orangetitle" id="grafica_title">Gráfica</span>
			<span class="bodytext"><br />
			<div id="myChart" style="width:940px; height:415px; background-color: #ffffff;"></div>
			<?php 
			echo form_open("/dispatcher/export",array('class'=>'form','id'=>'export_form',"target"=>"_blank"));
			echo form_input(array('name' => 'export',
								  'type' => 'submit',
								  'id' => 'export',
						   		  'value' => 'Export'
								 )
							);
			
			?>
			<!--  input type="button" name="export" value="Export" id="export" /-->
			<input type="hidden" value="" id="svgCode" name="svgCode" />
			<input type="hidden" value="" id="reporte_title" name="reporte_title" />
			<?php 
			echo form_close(); 
			?>
			</span><br />					
		</div>
	</div>
	<script type="text/javascript" >
		

	</script>